import React, { useState, useEffect } from 'react';
import { usePosition } from "../../contexts/PositionContext";
import './style.scss';


interface WeatherData {
    temp: string;       // 温度
    humidity: string;   // 湿度
    text: string;       // 天气状况
    windDir: string;    // 风向
    icon: string;       // 图标   
}
const MyHeader: React.FC = () => {
    const [weather, setWeather] = useState<WeatherData | null>(null);
    const { pos } = usePosition();

    // 获取当前日期
    const currentDate = new Date();
    // 获取日
    const day = currentDate.getDate();
    // 获取年月
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth() + 1;
    // 获取星期
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const weekday = weekdays[currentDate.getDay()];

    // 获取天气
    const getWeatherData = async (lng: number, lat: number) => {
        try {
            const response = await fetch(
                `https://n55khu8hcj.re.qweatherapi.com/v7/weather/now?location=${lng},${lat}&key=8a13111d80c64fc98e91f6f45f9bb139`
            );
            const data = await response.json();
            console.log("天气数据", data.now);
            setWeather({
                temp: data.now.temp,
                humidity: data.now.humidity,
                text: data.now.text,
                windDir: data.now.windDir,
                icon: data.now.icon
            });
        } catch (err) {
            console.error(err);
        }
    };

    // 获取用户位置并请求天气
    useEffect(() => {
        getWeatherData(pos[0], pos[1]);
    }, [pos]);

    return (
        <div className="header">
            <div className="innerBox">
                <div className="date">
                    <div className="left">{day}</div>
                    <div className="right">
                        <div className="year">{year}年{month}月</div>
                        <div className="week">{weekday}</div>
                    </div>
                </div>
                <div className="weather">
                    <div className="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="qi-100" viewBox="0 0 16 16">
                            <path d="M7.655 2.357a.5.5 0 0 0 .854-.353v-1.5a.5.5 0 0 0-1 0v1.5a.5.5 0 0 0 .146.353Zm-4.08 1.861c.06.026.126.039.191.039l.001-.001a.5.5 0 0 0 .355-.855l-1.064-1.06a.5.5 0 0 0-.707.708l1.062 1.06a.498.498 0 0 0 .162.11ZM.503 8.496h1.5a.5.5 0 1 0 0-1h-1.5a.5.5 0 0 0 0 1Zm1.914 5.221a.501.501 0 0 0 .631-.063l1.063-1.06a.5.5 0 0 0-.708-.707l-1.062 1.06a.5.5 0 0 0 .076.77Zm5.225 2.14a.5.5 0 0 0 .854-.354v-1.5a.5.5 0 0 0-1 0v1.5a.5.5 0 0 0 .146.354Zm5.467-2.084a.5.5 0 0 0 .544-.816l-1.06-1.06a.498.498 0 0 0-.832.152.5.5 0 0 0 .126.555l1.06 1.06a.496.496 0 0 0 .162.109Zm.893-5.263h1.5a.5.5 0 1 0 0-1h-1.5a.5.5 0 0 0 0 1Zm-2.031-4.327a.5.5 0 0 0 .633-.063l1.06-1.06a.5.5 0 1 0-.708-.708l-1.06 1.06a.5.5 0 0 0 .075.77Zm-6.466.075a4.5 4.5 0 1 1 5 7.484 4.5 4.5 0 0 1-5-7.484Zm4.445.832a3.5 3.5 0 1 0-3.89 5.82 3.5 3.5 0 0 0 3.89-5.82Z" />
                        </svg>
                    </div>
                    <div className="type">
                        <div className="typeText">{weather?.text}</div>
                        <div className="windDir">{weather?.windDir}</div>
                    </div>
                    <div className="detail">
                        <div className="temp">温度: {weather?.temp}℃</div>
                        <div className="humidity">湿度: {weather?.humidity}%</div>
                    </div>
                </div>
            </div>

        </div>
    );
};

export default MyHeader;